<template>
    <cl-button type="text" @click="handleClick">打开</cl-button>
    <cl-dialog v-model="dialogVisible" title="弹窗" width="50%" center draggable :before-close="handleClose">
        <span>这是一个弹窗</span>
        <template #footer>
            <span class="dialog-footer">
                <cl-button @click="dialogVisible = false">取消</cl-button>
                <cl-button type="primary" @click="dialogVisible = false">确认</cl-button>
            </span>
        </template>
    </cl-dialog>
    
    <div>嵌套弹窗</div>
    <cl-button type="text" @click="outerVisible = true">打开外部dialog</cl-button>
    <cl-dialog v-model="outerVisible" title="外部">
        <template #default>
            <cl-dialog v-model="innerVisible" width="30%" title="内部" append-to-body></cl-dialog>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <cl-button @click="outerVisible = false">取消</cl-button>
                <cl-button type="primary" @click="innerVisible = true">打开内部</cl-button>
            </div>
        </template>
    </cl-dialog>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        let dialogVisible = ref(false)
        let outerVisible = ref(false)
        let innerVisible = ref(false)
        const handleClick = function () {
            dialogVisible.value = true
        }
        const handleClose = function(done){
            done()
        }
        return {
            dialogVisible,
            outerVisible,
            innerVisible,
            handleClick,
            handleClose
        }
    },
})
</script>
